<!-- 首页下拉配置 -->
<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="search_form" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="效果名称：">
              <el-input v-model="search_form.name" placeholder="请输入效果名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上架状态:">
              <el-select v-model="search_form.status" placeholder="请选择上架状态" clearable>
                <el-option label="上架" value="1" />
                <el-option label="下架" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" class="el-icon-search" @click="search" >查询</el-button>
              <el-button type="primary"  class="el-icon-refresh" @click="reset">重置</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24" />
          <el-col :span="24">
            <el-form-item style="float:right">
              <el-button type="primary" plain class="el-icon-plus" @click="add_drop">添加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 列表 -->
    <div class="listDiv">
      <el-table v-loading="table_loading" :data="tableData" style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="序号"
          width="50"
          align="center"
          :index="table_index"
        />
        <el-table-column label="效果名称" prop="name" align="center"  />
        <el-table-column label="效果图片" align="center">
          <template slot-scope="scope">
            <div>
              <img :src="common.img_url+scope.row.image" alt class="smallBG" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="上架状态" align="center" >
          <template slot-scope="scope">
            <div>
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="changeSwitch($event,scope.row)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="120">
          <template slot-scope="scope">
            <!--            <el-button type="text" size="mini" @click="search_detail(scope.row)">查看</el-button>-->
            <el-button type="text" @click="edit_dro(scope.row.id)">编辑</el-button>
            <el-button type="text" @click="delete_dro(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        :current-page="search_form.page"
        :page-sizes="[10,20,50,100]"
        :page-size="search_form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>

  </div>
</template>

<script>
  import { indexDelete, indexList, updateIndex } from '../../../api/drop'
  import { deleteGoods } from '../../../api/goods'

  export default {
    data() {
      return {
        search_form:{
          type: 2,// 1闪屏 2首页下拉效
          name:'',
          status:'',
          page: 1,
          pageSize: 10,
        },//搜索表单
        total: 0,
        table_loading:false,//表格loading状态
        tableData:[],//表格数据
      }
    },

    mounted() {
      this.get_drop(this.search_form)
    },

    methods: {
      // 序号
      table_index(index) {
        return (this.search_form.page - 1) * this.search_form.pageSize + index + 1;
      },

      //筛选
      search(){
        this.get_drop(this.search_form)
      },

      //重置
      reset(){
        this.search_form.name=''
        this.search_form.status=''
        this.search_form.page= 1
        this.search_form.pageSize= 10
        this.get_drop(this.search_form)
      },

      //获取列表
      async get_drop(opt){
        this.table_loading = true
        let res = await indexList(opt);
        if(res.status == 200){
          this.tableData = res.data.data.data
          this.total = res.data.data.total
          this.table_loading = false
        } else {
          this.tableLoading = false;
          this.$message({
            showClose: true,
            message: res.data.message,
            type: "error",
          });
        }
      },

      //上下架
      changeSwitch(status,e){
        updateIndex({
          image:e.image,
          name:e.name,
          indexad_id:e.id,
          type:this.search_form.type,
          status:status
        }) .then((res) => {
          if(res.data.status == 0){
            this.$message({
              showClose: true,
              message: "修改上下架成功" ,
              type: "success",
            });
            this.search()
          }else {
            this.$message.error("修改上下架失败" ,res.data.message);
          }
        }).catch((res) => {
            this.$message({
              showClose: true,
              message: res.data.message,
              type: "error",
            });
          });
      },

      //添加
      add_drop(){
        this.$router.push({
          path: "/add",
          query: {
            page_status: 1,//
            page_type: this.search_form.type,//1-闪屏 2-下拉
          },
        });
      },

      //编辑
      edit_dro(id){
        this.$router.push({
          path: "/add",
          query: {
            page_status: 2,//
            page_type: this.search_form.type,//1-闪屏 2-下拉
            id: id
          },
        });
      },

      //删除
      delete_dro(id){
        this.$confirm("确认删除该下拉效果吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            indexDelete({
              indexad_id: id,
              })
                .then((result) => {
                  if(result.data.status == 0){
                    this.$message.success("删除成功")
                    this.search()
                  }else {
                    this.$message.error("删除失败，",result.data.message);
                  }
                })
                .catch((err) => {
                  this.$message.error("服务器网络错误，请稍后重试");
                });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },

      // 当前页面改变
      handleCurrentChange(val) {
        this.search_form.page = val
        this.search()
      },
      //条数改变
      handleSizeChange(val) {
        this.search_form.pageSize = val
        this.search_form.page = 1
        this.search()
      },
    }
  }
</script>
<style lang="less" scoped>
  .smallBG {
    width: 100px;
    height: 100px;
  }
</style>
